// eslint-disable-next-line 
import React, { Component, lazy, Suspense } from 'react'
import { Layout, Menu, Breadcrumb, Divider } from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
import { NavLink, Switch, Route } from 'react-router-dom'
import NavBread from '../../components/common/BreadCrumb'
import './style/admin.scss'
import { nanoid } from 'nanoid'
import Loading from '../../components/common/Loading'


export default class Admin extends Component {
  state = {
    //侧边栏路由数组
    asideArr: [
      {
        id: nanoid(),
        filePath:'./system/System',
        icon: "icon-set",
        pathName: "/admin/system",
        title: "系统设置",
        name: "系统设置",
        leftNav: true,
        keepAlive: false,
        requiresAuth: true,
        children: [
          {
            id: nanoid(),
            pathName: "/admin/system/setting",
            filePath:'./system/Setting',
            title: "常规设置",
            name: "常规设置",
            leftNav: true,
            keepAlive: false,
            requiresAuth: true,
          }
        ]
      },
      {
        id: nanoid(),
        filePath:'./member/Member',
        icon: "icon-LC_icon_user_fill_1",
        pathName: "/admin/member",
        title: "会员管理",
        name: "会员管理",
        leftNav: true,
        keepAlive: false,
        requiresAuth: true,
        children: [
          {
            id: nanoid(),
            filePath:'./member/Search',
            pathName: "/admin/member/checkmember",
            title: "查看会员",
            name: "查看会员",
            leftNav: true,
            keepAlive: false,
            requiresAuth: true,
          },
          {
            id: nanoid(),
            filePath:'./member/Add',
            pathName: "/admin/member/addmember",
            title: "添加会员",
            name: "添加会员",
            leftNav: true,
            keepAlive: false,
            requiresAuth: true,
          },
          {
            id: nanoid(),
            filePath:'./member/Edit',
            pathName: "/admin/member/modifmember",
            title: "修改会员",
            name: "修改会员",
            leftNav: false,
            keepAlive: false,
            requiresAuth: true,
          },
          {
            id: nanoid(),
            filePath:'./member/Role',
            pathName: "/admin/member/role",
            title: "角色管理",
            name: "角色管理",
            leftNav: false,
            keepAlive: false,
            requiresAuth: true,
          },
        ]
      },
      {
        id: nanoid(),
        filePath:'./article/Article',
        icon: "icon-navicon-wzgl",
        pathName: "/admin/article",
        title: "文章管理",
        name: "文章管理",
        leftNav: true,
        keepAlive: false,
        requiresAuth: true,
        children: [
          {
            id: nanoid(),
            filePath:'./article/Search',
            pathName: "/admin/article/checkarticle",
            title: "查看文章",
            name: "查看文章",
            leftNav: true,
            keepAlive: false,
            requiresAuth: true,
          },
          {
            id: nanoid(),
            filePath:'./article/Post',
            pathName: "/admin/article/addarticle",
            title: "添加文章",
            name: "添加文章",
            leftNav: true,
            keepAlive: false,
            requiresAuth: true,
          },
          {
            id: nanoid(),
            filePath:'./article/Class',
            pathName: "/admin/article/sortarticle",
            title: "文章分类",
            name: "文章分类",
            leftNav: true,
            keepAlive: false,
            requiresAuth: true,
          },
          {
            id: nanoid(),
            filePath:'./article/Edit',
            pathName: "/admin/article/modifarticle",
            title: "修改文章",
            name: "修改文章",
            leftNav: false,
            keepAlive: false,
            requiresAuth: true,
          },
        ]
      },
    ],
    routArr: [
      {
        path: '/admin/system',
        filePath:'./system/System'
      },
      {
        path: '/admin/system/setting',
        filePath:'./system/Setting'
      },
      {
        path: '/admin/member',
        filePath:'./member/Member'
      },
      {
        path: '/admin/member/checkmember',
        filePath:'./member/Search'
      },
      {
        path: '/admin/member/addmember',
        filePath:'./member/Add'
      },
      {
        path: '/admin/member/modifmember',
        filePath:'./member/Edit'
      },
      {
        path: '/admin/member/role',
        filePath:'./member/Role'
      },
      {
        path: '/admin/article',
        filePath:'./article/Article'
      },
      {
        path: '/admin/article/checkarticle',
        filePath:'./article/Search'
      },
      {
        path: '/admin/article/addarticle',
        filePath:'./article/Post'
      },
      {
        path: '/admin/article/sortarticle',
        filePath:'./article/Class'
      },
      {
        path: '/admin/article/modifarticle',
        filePath:'./article/Edit'
      },
    ],
    //面包屑数组
    breadcrumbArr: []
  }
  //面包屑方法
  itemRender = (route, params, routes, paths) => {
    const last = routes.indexOf(route) === routes.length - 1;
    return last ? (
      <span>{route.name}</span>
    ) : (
        <NavLink to={route.pathName}>{route.name}</NavLink>
      );
  }

  routePush = (item) => {
    const { breadcrumbArr } = this.state
    return () => {
      setTimeout(() => {
        // console.log(this.props.location);
        this.setState({ breadcrumbArr: this.props.location.pathname.slice(1).split("/") })
      }, 0)
      this.props.history.push(item.pathName)
    }
  }
  render() {
    const IconFont = createFromIconfontCN({
      scriptUrl: '//at.alicdn.com/t/font_2357604_h5r0wx9c2tv.js',
    });
    const { SubMenu } = Menu;
    const { Header, Footer, Sider, Content } = Layout;
    const { asideArr, breadcrumbArr } = this.state
    return (
      <div id="admin">
        <Layout>
          <Sider>
            <aside>
              <Menu
                mode="inline"
              >
                {asideArr.map((item, index) => {
                  return <SubMenu key={item.id} title={item.title} icon={<IconFont type={item.icon}></IconFont>}>
                    {
                      item.children ? item.children.map((items, indexs) => {
                        return <Menu.Item key={items.id} >
                          <p onClick={this.routePush(items)}>{items.title}</p>
                        </Menu.Item>
                      }) : ''
                    }
                  </SubMenu>
                })}
              </Menu>

            </aside>
          </Sider>
          <Layout>
            <Content className="main">
              <NavBread></NavBread>
              <Divider className="line"></Divider>
              {/* <Breadcrumb itemRender={this.itemRender} routes={asideArr} /> */}
              {/* <Breadcrumb>
                {breadcrumbArr.map((item, index) => {
                  return <Breadcrumb.Item key={nanoid()}>{item}</Breadcrumb.Item>
                })}

              </Breadcrumb> */}
              <Suspense fallback={<Loading />}>
                <Switch>
                  {
                    this.state.routArr.map((item,index)=>{//item.filePath+''转成字符串形式
                      return <Route exact path={item.path} component={lazy(() => import(item.filePath+''))}></Route>
                    })
                  }
                </Switch>
              </Suspense>
            </Content>
          </Layout>
        </Layout>


      </div>
    )
  }
}
